<!-- 套餐详情 -->
<template>
  <div class="SetMealDetails">
    <!-- 顶部返回按钮 -->
    <VanNavBar style="background-color: #3172ea; display: block;color: white;">
      <template #left>
        <div @click="onClickLeft">
          <van-icon name="arrow-left" size="18" color="#fff"  />
          <span style="font-size: 16px; line-height: 20px;">套餐详情</span>
        </div>
      </template>
    </VanNavBar>
    <div class="top">
      <!-- {{dangTaoCan[0]}} -->
      <div class="commodityList">
        <img :src="dangTaoCan.s_cover" alt="" />
        <div>
          <div class="title">
            <h3>{{ dangTaoCan.s_title }}</h3>
            <div class="share">
              <i class="iconfont icon-fenxiang"></i>
            </div>
          </div>
          <!-- {{ dangTaoCan }} -->
        <!-- <div class="item">
            <div class="a">入职体检</div>
            <div class="option">入职体检</div>
            <div class="option">入职体检</div>
            <div class="option">入职体检</div>
            <div class="option">入职体检</div>
            <div class="option">入职体检</div>
            <div class="option">入职体检</div>
                                                </div> -->
        </div>
      </div>
      <div class="weal">
        <div class="item">
          <i class="iconfont icon-xuanze"></i>
          支持退改
        </div>
        <div class="item">
          <i class="iconfont icon-xuanze"></i>
          可开发票
        </div>
        <div class="item">
          <i class="iconfont icon-xuanze"></i>
          送健康分
        </div>
      </div>
    </div>
    <div class="contact">
      <h2>使用医疗机构</h2>
      <div>
        <div class="left">
          <p>
            <span><i class="iconfont icon-yiyuan"></i>{{ hospitalInfo.h_order }}</span>{{ hospitalInfo.h_address }}
          </p>
          <div class="location">
            2.2km&nbsp;&nbsp;|&nbsp;&nbsp;{{ hospitalInfo.h_address }}
          </div>
        </div>
        <div class="right">
          <div @click="showF">
            <i class="iconfont icon-dianhua"></i>
            <p class="agencyName">海鸥健康</p>
          </div>
          <div class="identity"><span>代理商</span></div>
        </div>
      </div>
      <div class="price">
        <span>￥</span>
        <span>{{ dangTaoCan.s_price }}</span>
        <!-- <span>{{dangTaoCan.s_price.split('.')[1]}}</span> -->
      </div>
    </div>
    <!-- 联系方式显示 -->
    <van-popup v-model:show="showPhone" position="bottom" close-icon="close" :style="{ height: '30%' }">
      <h3 style="font-size: 20px; text-align: center; margin: 10px 0px">
        联系我们
      </h3>
      <div style="font-size: 20px; margin-left: 10px">
        <span style="background-color:'#569cd6';">地址:</span><span>{{ hospitalInfo.h_address }}</span>
      </div>
      <div style="font-size: 20px; margin-left: 10px">
        <span style="background-color:'#569cd6';">电话:</span><span>{{ hospitalInfo.h_phone }}</span>
      </div>
    </van-popup>

    <div class="time">
      <h2>可预日期</h2>
      <div class="subscribe_time">
        <div v-for="(item, i) in dateAry" :key="i">
          <div class="date">
            <p>周{{ WEEK[parseInt(item.format("e"))] }}</p>
            <p>{{ item.format("MM/DD") }}</p>
          </div>
          <div class="switchYes" @click="showYuYueTiJian(item.format('YYYY-MM-DD'))">可以预约</div>
        </div>
      </div>
    </div>
    <!-- 体检项目 -->
    <div class="main">
      <VanTabs v-model:active="itemName" scrollspy sticky background="#fff" color="#3376e3">
        <VanTab title="包括项目">
          <div class="title">
            <h2>包括项目</h2>
            <div v-for="i in dangTaoCan.s_details" :key="i" class="item">
              <div class="header">一般检查</div>
              <div class="title">一般体检(内&nbsp;外&nbsp;五官科)</div>
              <p>
                {{ i }}
              </p>
            </div>
            <!-- <div class="isolation"></div> -->
          </div>
        </VanTab>
        <VanTab title="检查须知">
          <div class="attention">
            <h2>注意事项</h2>
            <p class="item" v-for="itemNeeding in dangTaoCan.s_needing" :key="itemNeeding">
              {{ itemNeeding }}
            </p>
          </div>
        </VanTab>
      </VanTabs>
    </div>
  <!-- <div class="btn">
      <VanButton type="primary" size="large">大号按钮</VanButton>
                                    </div> -->
    <div style="height: 20px"></div>


    <van-popup v-model:show="yuYueTiJian" position="bottom" :style="{ height: '100%', backgroundColor: '#eee' }">
      <van-nav-bar style="background-color: #3172ea; display: block">
        <template #left>
          <div @click="yuYueTiJian = false" style="color: white">
            <van-icon name="arrow-left" size="18" color="#fff" />
            <span style="font-size: 16px; line-height: 20px">预约体检</span>
          </div>
        </template>
      </van-nav-bar>
      <!-- 体检套餐 -->
      <div class="yu-yue">
        <div class="title">
          <div class="one">
            <h3>{{ dangTaoCan.s_title }}</h3>
            <span>{{ hospitalInfo.h_name }}</span>
          </div>
          <div class="two">
            <span style="color: #d25a3d;">￥{{ dangTaoCan.s_price }}</span>
          </div>
        </div>
        <div class="info">
          <h3>预约信息</h3>
          <div>
            <span>体检人:</span>
            <input v-model="ren" placeholder="请输入体检人" type="text" name="" id="">
          </div>
          <div>
            <span>体检日期:</span>
            <input v-model="timeren" placeholder="请输入体检人" disabled type="text" name="" id="">
          </div>
        </div>
        <button @click="submit"
          style="width: 100%; background-color: #3172ea; height: 50px; font-size: 20px;font-weight: bold;color: white;">预约</button>
      </div>
    </van-popup>
  </div>
</template>

<script lang="ts" setup>
import router from "@/router";
import { ref, onMounted } from "vue";
import { reactive, computed } from "vue";
import moment from "moment";
import { useRoute } from "vue-router";
import { taocanType, hospital } from "@/type/Location";
import httpApi from "@/http";
import { da } from "element-plus/es/locale";
import { showFailToast, showSuccessToast } from "vant";

const route = useRoute(); // 当前路由对象
// 接收路径参数：id
let id = Number(route.params.id);
// console.log('typeof:',typeof id);

let healthExaminationTao = reactive<taocanType[]>([]);
// 当前套餐
let dangTaoCan = ref<taocanType>({});
// 保存医院信息
let hospitalInfo = ref<hospital>({});
onMounted(async () => {
  await httpApi.examination.queryOnePackage({ s_id: id }).then((res) => {
    // console.log("RES:", res.data.data);
    dangTaoCan.value = res.data.data[0];
    console.log("dengTaoCan:", dangTaoCan.value);
    // console.log("dangTaoCan.value.hospital_id:", dangTaoCan.value.hospital_id);
    // 获取医院信息
    httpApi.examination
      .hospitalById({ h_id: dangTaoCan.value.hospital_id })
      .then((res): void => {
        hospitalInfo.value = res.data.data[0];
        console.log("hospitalInfo:", hospitalInfo.value);
      });
  });
});

// 控制联系方式的显示和隐藏
let showPhone = ref<boolean>(false);
// 方法
let showF = () => {
  showPhone.value = !showPhone.value;
  //console.log("showF:", showPhone);
};

onMounted(() => {
  // httpApi.examination.hospitalById(s_id:dangTaoCan)
});

// 体检须知

// 使用计算属性计算日期
enum WEEK {
  "日",
  "一",
  "二",
  "三",
  "四",
  "五",
  "六",
}
const dateAry: moment.Moment[] = [];
for (let i = 0; i < 7; i++) {
  dateAry.push(moment().add(i, "days"));
}
// console.log(dateAry);

// needing.value = (dangTaoCan.value[]).split()

const active = ref("1");
// const tow = ref(1);
const itemName = ref(1);
const onClickLeft = function () {
  router.go(-1);
};

onMounted(() => {
  document.documentElement.scrollTop = 0;
});

let yuYueTiJian = ref<boolean>(false);
//体检人
let ren = ref<string>('');
let timeren = ref<string>('');
function showYuYueTiJian(time: string) {
  yuYueTiJian.value = true;
  timeren.value = time;
}

function submit() {
  if (ren.value === '') {
    showFailToast('请输入体检人姓名');
    return
  }
  httpApi.examination.chekUpDdd({
    hospital_id: dangTaoCan.value.hospital_id,
    c_id: '',
    p_name: ren.value,
    c_price: dangTaoCan.value.s_price,
    c_time: timeren.value,
    package_name: dangTaoCan.value.s_title,
  }).then(res => {
    console.log('11111111111111111111111:', res);
    ren.value === ''

    showSuccessToast('预约成功');
    yuYueTiJian.value = false;
  })
}
</script>

<style lang="scss" scoped>
@import url("//at.alicdn.com/t/c/font_3903764_mv07nx5ip5.css");
@import url("../../../node_modules/vant/lib/index.css");

* {
  font-size: 14px;
}

p,
body {
  margin: 0;
}

h3,
h2 {
  margin: 0;
}

// 顶部返回

.SetMealDetails {
  background-color: #f6f6f6;
}

// 顶部的css
.top {
  padding: 0 10px 20px;
  background-color: white;

  .commodityList {
    display: flex;
    padding-top: 20px;

    >img {
      width: 50px;
      height: 50px;
      object-fit: cover;
      margin-right: 16px;
    }

    >div {
      flex-grow: 1;

      >.title {
        display: flex;
        justify-content: space-between;
        position: relative;

        >h3 {
          font-size: 16px;
          width: 75%;
        }

        .share {
          width: 30px;
          height: 30px;
          border: 1px solid #e7e7e7;
          border-radius: 50%;
          font-size: 20px;
          text-align: center;
          position: absolute;
          right: 20px;
          top: -15px;

          >i {
            line-height: 30px;
            color: #a5a2b2;
          }
        }
      }

      >.item {
        display: flex;
        flex-wrap: wrap;
        margin: 10px 0;

        >div {
          // margin: 5px;
          padding: 0 5px;

          &.a {
            color: #5484ca;
            background-color: #e6f2fe;
          }

          &.option {
            color: #838383;
            background-color: #f7f7f7;
          }
        }
      }
    }
  }

  .weal {
    margin-top: 10px;
    display: flex;
    color: #757575;

    >.item {
      text-align: center;
      flex-grow: 1;

      i {
        margin-left: 12px;
      }
    }
  }
}

// 医院地址部分、联系方式

.contact {
  background-color: white;
  margin: 10px;
  padding: 20px 10px;
  border-radius: 8px;

  >h2 {
    font-size: 22px;
    margin: 0 0 10px;
  }

  >div {
    display: flex;
    justify-content: space-between;

    .left {
      width: 75%;

      >p {
        font-size: 18px;
        font-weight: bold;

        >span {
          background-color: #cf9e69;
          padding: 0 5px;
          color: white;
          margin-right: 10px;

          >i {
            font-size: 12px;
            line-height: 16px;

            &:before {
              font-size: 14px;
            }
          }
        }
      }

      >.location {
        margin: 10px 0;
        color: #a5a2b2;
      }
    }

    .right {
      >div {
        border-left: 1px solid #a5a2b2;
        padding-left: 14px;

        >i {
          display: block;
          width: 100%;
          text-align: center;
          color: #3276f0;
          font-size: 30px;
        }

        >.agencyName {
          text-align: center;
          color: #a5a2b2;
          margin: 4px;
        }

        &.identity {
          border: none;
          text-align: center;

          >span {
            padding: 0 4px;
            color: #afafaf;
            background: #f7f7f7;
          }
        }
      }
    }
  }

  >.price {
    justify-content: start;

    >span {
      display: inline-block;
      height: 20px;
      color: #d25a3d;
      font-weight: bold;
      line-height: 23px;

      &:nth-child(2) {
        font-size: 18px;
      }
    }
  }
}

.time {
  background-color: white;
  margin: 10px;
  padding: 20px 10px;
  border-radius: 8px;

  >h2 {
    font-size: 22px;
    font-weight: bold;
  }

  >.subscribe_time {
    display: flex;
    overflow: scroll;
    margin: 10px 0;
    padding-bottom: 10px;

    // &::-webkit-scrollbar {
    //   display: none;
    // }

    >div {
      flex-shrink: 0;
      width: 50px;
      border-bottom: 1px solid #a5a2b2;

      &:nth-last-child(1) {
        border-right: 1px solid #a5a2b2;
      }

      >div {
        border: 1px solid #a5a2b2;
        border-bottom: none;
        border-right: none;
        height: 50px;
        box-sizing: border-box;

        &.date {
          width: 100%;
          padding: 5px 0;

          >p {
            line-height: 20px;
            text-align: center;
            font-weight: bold;

            &:nth-child(1) {
              color: #a5a2b2;
            }
          }
        }

        &.switchNo {
          text-align: center;
          line-height: 50px;
          background-color: #f7f7f7;
          color: #cccccc;
        }

        &.switchYes {
          text-align: center;
          line-height: 20px;
          padding: 5px;
          background-color: #3272f5;
          color: white;
        }
      }
    }
  }
}

.main {
  font-size: 16px;
  margin: 10px 10px 0;
  border-radius: 5px;
  background-color: white;
  padding: 10px;

  .title {
    >h2 {
      padding: 10px 0;
      border-top: 1px solid #f5f5f5;
    }

    >.item {
      >div {
        &.header {
          background-color: #f3f8fe;
          color: #63686d;
          font-size: 16px;
          text-align: center;
          padding: 5px 0;
          border-radius: 5px;
        }

        &.title {
          line-height: 40px;
        }
      }

      >p {
        color: #7a7a7a;
        margin-bottom: 10px;
      }
    }

    .isolation {
      height: 20px;
      background-color: #f5f5f5;
    }
  }

  .attention {
    border-top: 6px solid #f6f6f6;

    >h2 {
      padding: 10px 0;
      border-top: 1px solid #f5f5f5;
    }

    // >.item{
    //   width: 100%;
    // }
  }
}

.btn {
  width: 100%;
  padding: 10px;
  border-top: 1px solid #757575;
  position: fixed;
  bottom: 0;
  background: white;
}

.yu-yue {
  margin: 10px;
  padding: 10px;
  background-color: #fff;
  min-height: 80vh;

  >.title {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #999;
    margin-bottom: 10px;

    >.one {
      >h3 {
        font-size: 16px;
        margin-bottom: 6px;
      }

      >span {
        font-size: 14px;
        color: #999;
      }
    }

    >.two {
      >span {
        font-weight: bold;
        line-height: 50px;
      }
    }
  }

  >.info {
    >div {
      padding: 10px;
      display: flex;
      justify-content: space-between;

      >input {
        border: none;
      }
    }
  }
}
</style>